/*
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 11:40:14
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-05-26 11:50:24
 * @FilePath: /vue3-cesium-plus/src/components/composables/usePosition.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { computed, type ExtractPropTypes } from 'vue'
import type { PositionType, OffsetType } from '../types/position'

export const positionProps = {
    position: {
      type: String as () => PositionType,
      validator: (value: string): value is PositionType => {
        return ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(value)
      },
      default: 'top-right'
    },
    offset: {
      type: Array as unknown as () => OffsetType,
      default: () => [20, 20] as OffsetType,
      validator: (value: unknown): value is OffsetType => {
        return Array.isArray(value) && value.length === 2 && 
               typeof value[0] === 'number' && typeof value[1] === 'number'
      }
    }
}
export type PositionPropsType = ExtractPropTypes<typeof positionProps>
export function usePosition(props: PositionPropsType) {
  const positionStyle = computed(() => {
    const [x, y] = props.offset // 现在可以安全解构，因为类型已经确保是 [number, number]
    const positions: Record<PositionType, Record<string, string>> = {
        'top-left': { top: `${y}px`, left: `${x}px` },
        'top-right': { top: `${y}px`, right: `${x}px` },
        'bottom-left': { bottom: `${y}px`, left: `${x}px` },
        'bottom-right': { bottom: `${y}px`, right: `${x}px` }
      }
      return positions[props.position]
  })

  return {
    positionStyle
  }
}